<template>
  <div class="category">
    <div class="search-holder">
      <div @click="toSearch" class="search">
        <span class="search-icon"></span>
        <span class="search-text">商品搜索，共{{$store.state.cartCount}}款好物</span>
      </div>
    </div>

    <van-sidebar v-model="activeKey">
      <van-sidebar-item
        :title="item.name"
        v-for="item in indexList"
        :key="item.id"
        @click="onChangeList(item.id)"
      />
    </van-sidebar>

    <div class="right-list-holder">
      <img class="banner-img" :src="goodsObj.banner_url" alt="" />
      <p class="banner-title">——{{ goodsObj.name }}分类——</p>
      <ul class="list">
        <li
          class="item"
          v-for="item in goodsObj.subList"
          :key="item.id"
          @click="toPageCategory(item.id)"
        >
          <img :src="item.wap_banner_url" alt="" />
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>

    <nav-tabber :active="2"></nav-tabber>
  </div>
</template>

<script>
import NavTabber from "@/components/common/nav-tabber";
import {
  getCategoryIndexList,
  getCategoryCurrentList,
} from "@/api/category/category";

export default {
  data() {
    return {
      indexList: [],
      activeKey: 0,
      goodsObj: {},
    };
  },
  methods: {
    toSearch() {
      this.$router.push("/search");
    },
    onChangeList(id) {
      getCategoryCurrentList({ id }).then(
        (res) => (this.goodsObj = res.data.currentOne)
      );
    },
    toPageCategory(id) {
      // console.log(url);
      this.$router.push({
        path: "/pages/category/category",
        query: { id: id },
      });
    },
  },
  created() {
    getCategoryIndexList().then((res) => {
      this.indexList = res.categoryList;
      getCategoryCurrentList({ id: this.indexList[0].id }).then((res) => {
        this.goodsObj = res.data.currentOne;
        console.log(res);
      });
    });
  },
  components: {
    "nav-tabber": NavTabber,
  },
};
</script>

<style lang="scss">
.category {
  .search-holder {
    display: flex;
    padding: 0 15px;
    box-sizing: border-box;
    height: 44px;
    width: 100%;
    background-color: #fff;
    .search {
      margin: auto;
      width: 100%;
      height: 28px;
      background-color: #ededed;
      text-align: center;
      line-height: 28px;
      .search-icon {
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        background: url("http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-2fb94833aa.png")
          no-repeat center;
      }
    }
  }
  .van-sidebar {
    float: left;
  }

  .right-list-holder {
    float: right;
    width: 295px;
    min-height: 90vh;
    background-color: #fff;
    .banner-img {
      margin: 0 auto;
      margin-top: 10px;
      display: block;
      height: 110px;
      width: 90%;
    }
    .banner-title {
      margin: 20px 0;
      text-align: center;
    }
    .list {
      overflow: hidden;
      .item {
        float: left;
        margin-bottom: 10px;
        width: 33%;
        height: 88px;
        img {
          display: block;
          margin: 0 auto;
          width: 80%;
        }
        p {
          text-align: center;
        }
      }
    }
  }
}
</style>